﻿<phone:PhoneApplicationPage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:wp7cinema_ViewModel="clr-namespace:wp7cinema.ViewModel" 
	xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:System="clr-namespace:System;assembly=mscorlib" xmlns:Custom="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:GalaSoft_MvvmLight_Command="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP7" xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" xmlns:im="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions" xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls" 
    x:Class="wp7cinema.View.Twitter.TwitterMain"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">
    <toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Forward><!-- 나올때 -->
            	<toolkit:SlideTransition Mode="SlideLeftFadeIn" />
            </toolkit:NavigationInTransition.Forward>
            <toolkit:NavigationInTransition.Backward><!--back버튼으로 돌아왔을때-->
                <toolkit:TurnstileTransition Mode="BackwardIn"/>
            </toolkit:NavigationInTransition.Backward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>
    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Forward><!-- 페이지 이동 -->
                <toolkit:TurnstileTransition Mode="ForwardOut"/>
            </toolkit:NavigationOutTransition.Forward>
            <toolkit:NavigationOutTransition.Backward><!-- back버튼으로나갈때 -->
                <toolkit:SlideTransition Mode="SlideRightFadeOut"/>
            </toolkit:NavigationOutTransition.Backward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>
	<phone:PhoneApplicationPage.Resources>
		<Style x:Key="TwittItemStyle" TargetType="ListBoxItem">
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="ListBoxItem">
						<StackPanel Orientation="Horizontal" Margin="0,0,0,20">
							<Image Height="130" VerticalAlignment="Top" Width="130" Source="{Binding ImageSource}" HorizontalAlignment="Left"/>
							<StackPanel Margin="10,0,0,0" Width="310">
								<TextBlock TextWrapping="Wrap" Text="{Binding UserName}" Foreground="#FF3CA8AB"/>
								<TextBlock TextWrapping="Wrap" Text="{Binding Message}" Margin="0,10,0,0" FontSize="26.667"/>
							</StackPanel>
						</StackPanel>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<Storyboard x:Name="TweetUpdateAnimation">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="listBox">
				<EasingDoubleKeyFrame KeyTime="0" Value="627"/>
				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="623"/>
				<EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="0">
					<EasingDoubleKeyFrame.EasingFunction>
						<QuinticEase EasingMode="EaseOut"/>
					</EasingDoubleKeyFrame.EasingFunction>
				</EasingDoubleKeyFrame>
			</DoubleAnimationUsingKeyFrames>
			<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ProgressBar">
				<DiscreteObjectKeyFrame KeyTime="0">
					<DiscreteObjectKeyFrame.Value>
						<Visibility>Visible</Visibility>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
				<DiscreteObjectKeyFrame KeyTime="0:0:2">
					<DiscreteObjectKeyFrame.Value>
						<Visibility>Collapsed</Visibility>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
			</ObjectAnimationUsingKeyFrames>
			<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBox.Text)" Storyboard.TargetName="TweetTextBox">
				<DiscreteObjectKeyFrame KeyTime="0" Value="트윗 등록중입니다..."/>
				<DiscreteObjectKeyFrame KeyTime="0:0:2" Value=""/>
			</ObjectAnimationUsingKeyFrames>
		</Storyboard>
	</phone:PhoneApplicationPage.Resources>
 
<!--Sample code showing usage of ApplicationBar-->
 
	<phone:PhoneApplicationPage.FontFamily>
		<StaticResource ResourceKey="PhoneFontFamilyNormal"/>
	</phone:PhoneApplicationPage.FontFamily>
	<phone:PhoneApplicationPage.FontSize>
		<StaticResource ResourceKey="PhoneFontSizeNormal"/>
	</phone:PhoneApplicationPage.FontSize>
	<phone:PhoneApplicationPage.Foreground>
		<StaticResource ResourceKey="PhoneForegroundBrush"/>
	</phone:PhoneApplicationPage.Foreground>
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

	<phone:PhoneApplicationPage.DataContext>
		<wp7cinema_ViewModel:TwitterViewModel/>
	</phone:PhoneApplicationPage.DataContext>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
    	<VisualStateManager.VisualStateGroups>
    		<VisualStateGroup x:Name="TwitterState">
    			<VisualStateGroup.Transitions>
    				<VisualTransition GeneratedDuration="0"/>
    				<VisualTransition GeneratedDuration="0" To="ReviewWriting"/>
    				<VisualTransition From="ReviewWriting" GeneratedDuration="0:0:2" To="TweetUpdated"/>
    			</VisualStateGroup.Transitions>
    			<VisualState x:Name="ReviewWriting">
    				<Storyboard>
    					<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ProgressBar">
    						<DiscreteObjectKeyFrame KeyTime="0">
    							<DiscreteObjectKeyFrame.Value>
    								<Visibility>Visible</Visibility>
    							</DiscreteObjectKeyFrame.Value>
    						</DiscreteObjectKeyFrame>
    					</ObjectAnimationUsingKeyFrames>
    					<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Pivot.SelectedIndex)" Storyboard.TargetName="pivot">
    						<DiscreteObjectKeyFrame KeyTime="0">
    							<DiscreteObjectKeyFrame.Value>
    								<System:Int32>1</System:Int32>
    							</DiscreteObjectKeyFrame.Value>
    						</DiscreteObjectKeyFrame>
    					</ObjectAnimationUsingKeyFrames>
    					<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Selector.SelectedIndex)" Storyboard.TargetName="listBox">
    						<DiscreteObjectKeyFrame KeyTime="0">
    							<DiscreteObjectKeyFrame.Value>
    								<System:Int32>0</System:Int32>
    							</DiscreteObjectKeyFrame.Value>
    						</DiscreteObjectKeyFrame>
    					</ObjectAnimationUsingKeyFrames>
    				</Storyboard>
    			</VisualState>
    			<VisualState x:Name="TweetUpdated">
    				<Storyboard>
    					<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Pivot.SelectedIndex)" Storyboard.TargetName="pivot">
    						<DiscreteObjectKeyFrame KeyTime="0">
    							<DiscreteObjectKeyFrame.Value>
    								<System:Int32>0</System:Int32>
    							</DiscreteObjectKeyFrame.Value>
    						</DiscreteObjectKeyFrame>
    					</ObjectAnimationUsingKeyFrames>
    					<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Selector.SelectedIndex)" Storyboard.TargetName="listBox">
    						<DiscreteObjectKeyFrame KeyTime="0">
    							<DiscreteObjectKeyFrame.Value>
    								<System:Int32>-1</System:Int32>
    							</DiscreteObjectKeyFrame.Value>
    						</DiscreteObjectKeyFrame>
    					</ObjectAnimationUsingKeyFrames>
    				</Storyboard>
    			</VisualState>
    		</VisualStateGroup>
    	</VisualStateManager.VisualStateGroups>
        <Grid.RowDefinitions>
        	<RowDefinition Height="Auto"/>
        	<RowDefinition Height="*"/>
        </Grid.RowDefinitions>

    	<Custom:Interaction.Triggers>
    		<Custom:EventTrigger EventName="Click" SourceName="TweetBtn">
    			<GalaSoft_MvvmLight_Command:EventToCommand x:Name="NewTweetCmd" Command="{Binding NewTweetCommand}" CommandParameter="{Binding Text, ElementName=TweetTextBox}"/>
    			<ic:GoToStateAction x:Name="ClickNewTweet" StateName="ReviewWriting"/>
    		</Custom:EventTrigger>
    		<Custom:EventTrigger EventName="SelectionChanged" SourceName="listBox">
    			<im:ControlStoryboardAction x:Name="ShowAnimation" Storyboard="{StaticResource TweetUpdateAnimation}"/>
    			<ic:GoToStateAction x:Name="UpdatedTweet" StateName="TweetUpdated"/>
    		</Custom:EventTrigger>
    		<Custom:EventTrigger EventName="Loaded">
    			<GalaSoft_MvvmLight_Command:EventToCommand x:Name="GetTweetCommand" Command="{Binding GetTweetCommand}"/>
    		</Custom:EventTrigger>
    	</Custom:Interaction.Triggers>
    	<controls:Pivot x:Name="pivot" Grid.Row="1" Title="Twitter">
    		<controls:PivotItem Header="My Tweet">
    			<ListBox x:Name="listBox" ItemsSource="{Binding TwittItems}" ItemContainerStyle="{StaticResource TwittItemStyle}" Height="634" RenderTransformOrigin="0.5,0.5">
    				<ListBox.RenderTransform>
    					<CompositeTransform/>
    				</ListBox.RenderTransform>
    			</ListBox>
    		</controls:PivotItem>
    		<controls:PivotItem Header="리뷰쓰기">
    			<StackPanel>
    				<TextBlock TextWrapping="Wrap" Text="What's happening?" Margin="8,0,153,0" FontSize="32"/>
    				<TextBox x:Name="TweetTextBox" TextWrapping="Wrap" InputScope="Default" AcceptsReturn="True" Height="242"/>
    				<StackPanel Orientation="Horizontal" d:LayoutOverrides="Width" HorizontalAlignment="Right">
    					<TextBlock x:Name="CharacterCount" TextWrapping="Wrap" Text="140" FontSize="32" VerticalAlignment="Center"/>
    					<Button x:Name="TweetBtn" Content="Tweet" FontSize="32" d:LayoutOverrides="Height" IsEnabled="False"/>
    				</StackPanel>
    				<ProgressBar x:Name="ProgressBar" Height="40" IsIndeterminate="True" Visibility="Collapsed"/>
    			</StackPanel>
    		</controls:PivotItem>
    	</controls:Pivot>
    </Grid>

</phone:PhoneApplicationPage>
